<template>
    <div class="main">
        <transition>
            <div class="mainWrap"
                 v-if="$router.currentRoute.meta.keepalive">
                <keep-alive>
                    <router-view/>
                </keep-alive>
            </div>
            <div class="mainWrap"
                 v-if="!$router.currentRoute.meta.keepalive">
                <router-view/>
            </div>
        </transition>
        <tabbar class="btn-nav">
            <tabbar-item link="/Index/IndexManager"
                         :selected="path.indexOf('IndexManager') != -1">
                <img slot="icon"
                     src="../assets/6-4.png">
                <img slot="icon-active"
                     src="../assets/6-1.png">
                <span slot="label">首页</span>
            </tabbar-item>
            <tabbar-item link="/Index/newEdit"
                         :selected="path.indexOf('newEdit')!= -1">
                <img slot="icon"
                     src="../assets/6-5.png">
                <img slot="icon-active"
                     src="../assets/6-2.png">
                <span slot="label">工作台</span>
            </tabbar-item>
            <tabbar-item link="/Index/userinfo"
                         :selected="path.indexOf('userinfo')!= -1">
                <img slot="icon"
                     src="../assets/6-6.png">
                <img slot="icon-active"
                     src="../assets/6-3.png">
                <!-- <img slot="icon-active" src="../assets/6-3.png"> -->
                <span slot="label">个人中心</span>
            </tabbar-item>
        </tabbar>

    </div>

</template>

<script>
import { Tabbar, TabbarItem, TransferDom } from 'vux'
export default {
    name: 'App',
    data () {
        return {
            userInfo: {}, // 用户信息
            path: '',
            tosPosition: 'center'
        }
    },
    components: {
        tabbar: Tabbar,
        'tabbar-item': TabbarItem
    },
    watch: {
        $route (to) {
            this.path = to.path
        }
    },
    created () {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        if (this.$router.history.current.name) {
            this.path = this.$router.history.current.name
        }
    },
    directives: {
        TransferDom
    },
    methods: {
    }
}
</script>

<style scoped lang="less">
.btn-nav {
    background: #fff;
}
</style>
<style>
.main {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: scroll;
    background: #fff;
}
.main .weui-toast .weui-toast__content {
    color: #fff;
    font-size: 14px;
}
.mainWrap {
    width: 100%;
    /* min-height: 100%; */
    position: absolute;
    top: 0;
}
</style>
